<script lang="ts">
	import { classMap } from '@smui/common/internal';

	let className = '';
	export let text = '';
	export { className as class };
</script>

<div
	class={classMap({
		[className]: true,
		'marker-layer': true
	})}
	style="pointer-events: none; cursor: not-allowed !important;"
>
	{text}
</div>

<style>
	.marker-layer {
		pointer-events: none;
		cursor: not-allowed !important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 30px;
		color: #d1d5db;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
